import Child from './components/child'
// 父组件样式
// 1. 普通导入方式
// import './index.scss'
// 2. 样式模块导入方式
import stys from './index.module.scss'
/**
 * 组件样式使用总结：
 * 1. 同名类名会互相覆盖
 * 2. 后导入的会覆盖先导入的样式（规则）
 * 怎么解决？=》css modules
 */
// 表格组件
import { Table, Card } from 'antd'
import Ref from './components/存储值'
// console.log('css modules:', stys)
function Test() {
  // 表格数据
  // 1. 指定表格每列展示的数据
  const columns = [
    {
      title: '名字',
      dataIndex: 'name', // 指定当前列显示list数据的属性名
      key: 'name',
      // 自定义当前列的显示（按需）
      /**
       * 有点像vue的作用域插槽
       * @param {*} text 当前的值
       * @param {*} row 当前行的数据
       * @returns
       */
      render: (text, row) => {
        console.log(text, row)
        return <a>{text}</a>
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  // 2. 指定表格展示的后台数据
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ]

  return (
    <>
      <Ref />
      {/* // 使用card组件包裹table渲染（课堂练习） */}
      <Card title={<h2>列表</h2>}>
        {/* 卡片内容 */}
        <Table columns={columns} dataSource={data} />
      </Card>

      {/* // <div className={stys['bd-weight']}>
    //   <h1 className={[stys.box, stys.bdBlue].join(' ')}>父组件</h1>
    //   <h2 className={`${stys.box} ${stys.bdBlue}`}>多个类名添加</h2>
    //   <h3 className="fontColor bdColor">没有改名的全局样式</h3>
    //   <hr />
    //   <Child />
    // </div> */}
    </>
  )
}

export default Test
